<template>
  <div style="margin-top: 20px; margin: 50px; margin-right: 100px">
    <!-- 按钮 -->

    <el-row>
      <el-button
        style="float: right; margin-left: 10px"
        type="primary"
        @click="dialogFormVisible = true; classdata={}; status=0"
        >+ 新增班级</el-button
      >
      <el-button
        style="float: right"
        type="primary"
        @click="init()"
        icon="el-icon-refresh"
        >
        </el-button>
    </el-row>
    <br>
    <!-- 数据表格 -->
    <template>
      <el-table
        highlight-current-row
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :loading="loading"
        border
      >
        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="grade" label="年级名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="name" label="班级名称" header-align="center" align="center"></el-table-column>
        <el-table-column label="最后操作时间" header-align="center" align="center">
          <template slot-scope="scope">
              {{scope.row.updateTime ? scope.row.updateTime.replace('T',' '):''}}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="420" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="selectById(scope.row);status=1"
              >编辑</el-button
            >

            <el-button
              size="mini"
              type="danger"
              plain
              @click="deleteById(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 新建对话框 -->

    <el-dialog :title="status ===1?'修改班级':'新增班级'" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="classdata">
        <el-form-item label="年级名称" :label-width="formLabelWidth" prop="grade">
          <el-select v-model="classdata.grade" placeholder="请选择年级">
            <el-option label="一年级" value="一年级"></el-option>
            <el-option label="二年级" value="二年级"></el-option>
            <el-option label="三年级" value="三年级"></el-option>
            <el-option label="四年级" value="四年级"></el-option>
            <el-option label="五年级" value="五年级"></el-option>
            <el-option label="六年级" value="六年级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="classdata.name"  placeholder="请输入班级名称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAll, add, update, deleteById, selectById } from "@/api/class.js";

export default {
  data() {
    return {
      status: 0,
      formLabelWidth: "120px",
      loading: false,
      dialogFormVisible: false, //控制对话框是否可见
      classdata: {},
      tableData: [],
    };
  },
  methods: {
    //关闭对话框时清空classdata
    handleClose() {
      this.dialogFormVisible = false
    },
    //删除班级
    deleteById(id) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          const data = new FormData()
          data.append("id",id)
          deleteById(data).then((result) => {
          	if(result.data.code === 200){
	          	this.$message({
	              message: "恭喜你，删除成功",
	              type: "success",
	            });
	        }else{
	        	this.$message.error(result.data.msg);
	        }
            //重新查询数据
            this.init();
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //根据ID查询班级 -- 回显
    selectById(data) {
      this.dialogFormVisible = true;
      selectById(data.id).then((result) => {
        this.classdata = result.data.data;
      }).catch((error)=>{
        this.classdata = data
        // console.log(error);
      });
    },

    //保存方法
    add() {
      let method ;// 添加
      if (this.classdata.id) {
        method = update(this.classdata); // 修改
      }else{
        method = add(this.classdata); //添加 
      }
      method.then((result) => {
        if (result.data.code === 200) {
          //修改成功
          this.$message.success("恭喜你，保存成功");
          //重新查询数据
          this.init();
        } else {
          this.$message.error(result.data.msg);
        }
      }).finally(() => {
        //关闭对话框
        this.dialogFormVisible = false
        this.classdata = {};
        // init
        this.init()
      })
    },

    //初始化 - 查询全部
    init() {
      //请求班级数据
      findAll().then((result) => {
        console.log(result);
        this.loading =true
        if (result.data.code === 200) {
          this.tableData = result.data.data;
        }
      }).catch((error)=>{
        console.log(error);
      }).finally(()=>{
        this.loading = false;
      });
    },
  },
  mounted() {
    //当页面加载完成后自动执行。
    this.init();
  },
};
</script>
<style>

</style>
